<template>
  <div class="cate-cell" :class="{bd1px: showBorder}">
    <img v-if="showImg" :src="img" :style="{width: imgWidth}" alt="">
    <span class="title">{{title}}</span>
    <span class="desc">{{desc}}</span>
  </div>
</template>

<script>
export default {
  props: {
    img: String,
    imgWidth: String,
    showImg: {
      type: Boolean,
      default: true
    },
    title: String,
    desc: String,
    showBorder: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style lang="less" scoped>
  .cate-cell {
    position: relative;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #ffffff;
    &.bd1px:after{
      content: " ";
      display: block;
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 1px;
      border-bottom: 1px solid #d2d2d2;
      color: #d2d2d2;
      transform-origin: 0 100%;
      transform: scaleY(0.5);
    }
    img {
      display: inline-block;
      width: 0.36rem;
      margin-left: 0.2rem;
      margin-right: 0.1rem;
    }
    .title {
      font-size: 0.28rem;
      color: #333333;
    }
    .desc {
      font-size: 0.22rem;
      color: #999999;
      margin-left: 0.17rem;
    }
  }
</style>
